<template>
    <div class="contact">
        <header>
            <div class="s-b user-info">
                <span>昵称</span>
                <i class="el-icon-close" @click='closeHandle'></i>
            </div>
            <div class="price">
                <span>价格：</span>
                <span >12312321</span>
            </div>
            <div class="price"> 
                <span>交易限额：</span>
                <span  >123164556465</span>
            </div>
        </header>
        <div class="content">
            <p class="center">未下单前，只能通过对话模板进行交流</p>
            <div class="message-list">
                <div class="my-msg msg-item">
                    <div class="msg">
                        你好，请问在吗
                    </div>
                    <img :src="require('@ast/imgs/1.png')" alt="">
                </div>
                <div class="no-my-msg  msg-item">
                    <img :src="require('@ast/imgs/1.png')" alt="">
                    <div class="msg">
                        你好，请问在吗
                    </div>
                </div>
            </div>
        </div>
        <ul class="templates">
            <li>你好，请问在吗？</li>
            <li>你好，请问可以更换支付方式吗？</li>
            <li>你好，请问付款后能及时放币吗？</li>
            <li>你好，请问可以设置信任进行交易吗？</li>
        </ul>
    </div>
</template>

<script>
   
    export default {
        data() {
            return {
               
            };
        },
        methods :{
            closeHandle () {
                this.$emit('close')
            }
        }
    }
</script>
<style lang="less" scoped>
    @import url('../assets/css/_b.less');
    @media screen and (max-width : 670px) {
        header{
            padding: 10px;
            border-bottom: 1px solid @borderColor;
            div {
                margin-bottom: 15px;
                span {
                    font-size: 12px;
                    color: #78889E;
                }
            }
            .user-info {
                font-size: 18px;
                color: #000;
                span {
                    color: #000;
                    font-size: 18px;
                }
            }
            .price {
                span:nth-child(1) {
                    display: inline-block;
                    width: 120px;
                }
                span:nth-child(2) {
                    font-size: 15px;
                    color: #000;
                }
            }
        }
        .content {
            padding: 15px 10px;
            height: 200px;
            border-bottom: 1px solid @borderColor;
            .message-list {
                .msg-item {
                    margin-bottom: 10px;
                }
                .my-msg {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    img {
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        margin-left: 10px;
                    }
                    .msg {
                        display: inline-block;
                        text-align: left;
                        vertical-align: top;
                        padding: 6px 12px;
                        font-size: 14px;
                        line-height: 22px;
                        position: relative;
                        min-width: 42px;
                        color: #252c34;
                        border-radius: 4px;
                        background-color: #c3dfff;
                        word-break: break-word;
                        word-wrap: break-word;
                        border: solid 1px #e4e9ed;
                    }
                }
                .no-my-msg {
                    .f-s();
                    img {
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        margin-right: 10px;
                    }
                    
                    .msg {
                        display: inline-block;
                        text-align: left;
                        vertical-align: top;
                        padding: 6px 12px;
                        font-size: 14px;
                        line-height: 22px;
                        position: relative;
                        min-width: 42px;
                        color: #252c34;
                        border-radius: 4px;
                        background-color: #eaf1f9;
                        word-break: break-word;
                        word-wrap: break-word;
                        border: solid 1px #e4e9ed;
                    }
                }
                
            }
        }
        .templates {
            li {
                cursor: pointer;
                font-size: 15px;
                padding: 10px;
                text-align: center;
                border-bottom: 1px solid @borderColor;
            }
        }
    }
    @media screen and (min-width : 670px) {
        header{
            padding: 10px;
            border-bottom: 1px solid @borderColor;
            
            div {
                margin-bottom: 15px;
                span {
                    font-size: 12px;
                    color: #78889E;
                }
            }
            .user-info {
                font-size: 18px;
                color: #000;
                span {
                    color: #000;
                    font-size: 18px;
                }
            }
            .price {
                span:nth-child(1) {
                    display: inline-block;
                    width: 120px;
                }
                span:nth-child(2) {
                    font-size: 15px;
                    color: #000;
                }
            }
        }
        .content {
            padding: 15px 10px;
            height: 200px;
            border-bottom: 1px solid @borderColor;
            .message-list {
                .msg-item {
                    margin-bottom: 10px;
                }
                .my-msg {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    img {
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        margin-left: 10px;
                    }
                    .msg {
                        display: inline-block;
                        text-align: left;
                        vertical-align: top;
                        padding: 6px 12px;
                        font-size: 14px;
                        line-height: 22px;
                        position: relative;
                        min-width: 42px;
                        color: #252c34;
                        border-radius: 4px;
                        background-color: #c3dfff;
                        word-break: break-word;
                        word-wrap: break-word;
                        border: solid 1px #e4e9ed;
                    }
                }
                .no-my-msg {
                    .f-s();
                    img {
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        margin-right: 10px;
                    }
                    
                    .msg {
                        display: inline-block;
                        text-align: left;
                        vertical-align: top;
                        padding: 6px 12px;
                        font-size: 14px;
                        line-height: 22px;
                        position: relative;
                        min-width: 42px;
                        color: #252c34;
                        border-radius: 4px;
                        background-color: #eaf1f9;
                        word-break: break-word;
                        word-wrap: break-word;
                        border: solid 1px #e4e9ed;
                    }
                }
                
            }
        }
        .templates {
            li {
                cursor: pointer;
                font-size: 15px;
                padding: 10px;
                text-align: center;
                border-bottom: 1px solid @borderColor;
            }
        }
    }
</style>